<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>

        <!-- CCL -->
        <link rel="stylesheet" href="http://web.mcooz.com/dogegg_danmu/build/style.css" />
        <script type="text/javascript" src="http://web.mcooz.com/dogegg_danmu/build/CommentCoreLibrary.js"></script>
        <script type="text/javascript" src="http://web.mcooz.com/js/jquery-1.11.1.min.js"></script>
    </head>
    <style type="text/css">
    .chat{
    width: 610px;
    height: 800px;
    margin: 0 auto;
    }
    .show{
    border: 1px solid #000;
    width: 400px;
    height: 420px;
    display: block;
    }
    .neirong{
    border:1px solid #000;
    width: 400px;
    display: block;
    }
    .nei{
    width: 400px;
    display: block;
    }
    .online{
    margin-top: -450px;
    width: 200px;
    height: 450px;
    float: right;
    /* background-color: yellow; */
    border:1px solid #000;
    }
    p{
    display: inline;
    width: 400px;
    }
    .one{
    color: blue;
    }
    </style>
    <body>
        <div><span><a href="<{:U('/Login/logout')}>">logout..</a></span></div>
        <a href="<{:U('/index/fresh')}>">test....</a>
        <div id="my-player" class="abp" style="width:100%; height:300px; background:#000;">
            <div id="my-comment-stage" class="container"></div>
        </div>
        <!-- 当然可以放很多别的东西 -->
        <div class="controlbox">
            <h3>调试用绑定</h3>
            <p>这里提供了一些调试用的绑定，可以通过操作它们感受操控 CCL 的方法。打开 main.js 就可以看到实现这些方法的绑定函数。</p>
            <ul>
                <li><a href="#" id="btnLoadTimeline">载入一个弹幕列表</a></li>
                <li><a href="#" id="btnInsertTimeline">插入一个弹幕到弹幕列表</a></li>
                <li><a href="#" id="btnTimer">启用/重置 定时器来告知播放器目前的播放位置</a> <span id="txPlayPos">0</span></li>
            </ul>
        </div>

        <!-- 下面接入 CCL 代码 -->
        <div class="chat" >
            <p>chat box</p><br/>
            <!-- 信息展示框 -->
            <div class="show">
                <foreach name="msg" item="v">
                <div class="neirong">
                    <span><{$v.time|date="Y-m-d h:i:s",###}> <{$v.sender}>:</span>
                    <br><{$v.content}>
                </div>
                </foreach>
            </div>
            <!-- 在线用户框 -->
            <div class="online">
                <span class="neiron">online:</span><br />
                <foreach name="user" item="value">

                <span class="one"><{$value.nickname}></span>
                </foreach>
            </div>
            <!-- 输入框 -->
            <div class="">
                <textarea name="content" class="content" cols="45" rows="3"></textarea><input type="submit" id="submit" class="submit" value="submit" />

            </div>
        </div>
    </body>
    <script>

    </script>
    <script type="text/javascript">
    $(document).ready(function(){
    function Y(element){
    return document.getElementById(element);
    };
    window.addEventListener('load', function(){
    // 在窗体载入完毕后再绑定
    var CM = new CommentManager(Y('my-comment-stage'));
    CM.init();

    // 先启用弹幕播放（之后可以停止）
    CM.start();

    var danmakuTimeline = [
    {
    "mode":1,
    "text":"Hello World",
    "stime":0,
    "size":25,
    "color":0xffffff
    }
    ];
    CM.load(danmakuTimeline);
    var danmaku = {
    "mode":1,
    "text":"Hello CommentCoreLibrary",
    "stime":5000,
    "size":30,
    "color":0xff0000
    };
    CM.insert(danmaku);

    startTime = Date.now(); // 设定起始时间
    if(iVal >= 0){
    clearInterval(iVal); // 如果之前就有定时器，把它停掉
    }
    //建立新的定时器
    iVal = setInterval(function(){
    var playTime = Date.now() - startTime; // 用起始时间和现在时间的差模拟播放
    CM.time(playTime); // 通报播放时间
    Y('txPlayPos').textContent = playTime; // 显示播放时间
    }, 100); // 模拟播放器每 100ms 通报播放时间









        $.ajax({      
               type:"POST",      
               dataType:"json",      
               url:"/eag/index.php/auction/refresh//"+$("#auction_process li").length,      
               timeout:80000,     //ajax请求超时时间80秒      
               data:{time:"100"},//40秒后无论结果服务器都返回数据      
               cache:false,
               success:function(data){      
                   //从服务器得到数据，显示数据并继续查询  
       
                   
               },      
       
                     
           }); 




   












    // 绑定按钮们
    Y('btnLoadTimeline').addEventListener('click', function(e){
    e.preventDefault(); // 抑制默认操作
    var danmakuTimeline = [
    {
    "mode":1,
    "text":"Hello World",
    "stime":0,
    "size":25,
    "color":0xffffff
    }
    ];
    CM.load(danmakuTimeline);
    });

    Y('btnInsertTimeline').addEventListener('click', function(e){
    e.preventDefault(); // 抑制默认操作
    var danmaku = {
    "mode":1,
    "text":"Hello CommentCoreLibrary",
    "stime":1000,
    "size":30,
    "color":0xff0000
    };
    CM.insert(danmaku);
    });

    var startTime = 0, iVal = -1;
    Y('btnTimer').addEventListener('click', function(e){
    e.preventDefault(); // 抑制默认操作
    startTime = Date.now(); // 设定起始时间
    if(iVal >= 0){
    clearInterval(iVal); // 如果之前就有定时器，把它停掉
    }
    //建立新的定时器
    iVal = setInterval(function(){
    var playTime = Date.now() - startTime; // 用起始时间和现在时间的差模拟播放
    CM.time(playTime); // 通报播放时间
    Y('txPlayPos').textContent = playTime; // 显示播放时间
    }, 100); // 模拟播放器每 100ms 通报播放时间
    });


    $('.submit').click(function(){

    var name=$('.content').val();
    $.post("<{:U('/index/ajax')}>",{content:name},function(msg){

    var dat=eval("(" + msg + ")");
    //alert(dat.data);
    $(".show").empty();
    $.each(dat.data,function(neirongIndex,datt){
    //alert(datt);
    var html = "<div class='neirong'><span>"+datt['timee']+"&nbsp;&nbsp;";
        html += datt['sender'];
        html += ":</span><br/>"+datt['content'];
        html += "</div>";
    $('.show').append(html);
    });
    $("textarea").val('');


    });
    });

    // 开放 CM 对象到全局这样就可以在 console 终端里操控
    window.CM = CM;
    });

    });


    function xx(){
    //返回处理最新五条信息
    $.get("<{:U('/index/fresh')}>",'',function(mess){
    var dat=eval("(" + mess + ")");
    $(".show").empty();

    $.each(dat.data,function(neirongIndex,datt){
    // var date=Date(datt['time']);
    var html = "<div class='neirong'><span>"+datt['timee']+"&nbsp;&nbsp;";
        html += datt['sender'];
        html += ":</span><br/>"+datt['content'];
        html += "</div>";
        $('.show').append(html);
    });
    });
    //返回处理在线用户
    $.get("<{:U('/index/freshUser')}>",'',function(mes){
    var dat=eval("(" + mes + ")");
    $(".one").empty();
    $.each(dat.data,function(oneIndex,onlin){
    var line="<span class='one'>"+onlin['nickname']+"<br/></span>";
    $('.online').append(line);
    }); });
    }
    //自动刷新
    setInterval("xx()",3000);
    </script>


</html>